<template>
  <!-- 组排版 -->
  <div
    :class="{
      'tree-node-custom-card': route.fullPath === '/home',
      'tree-node-custom-card-home': route.fullPath !== '/home'
    }"
  >
    <!-- <div class="custom-number">{{ data.length }}</div> -->
    <div
      v-for="(item, index) in data"
      :key="index"
      class="node-group"
      :class="{
        odd: index % 2 === 0,
        even: index % 2 !== 0,
        key: (index === data.length - 1 || index === data.length - 2) && index % 2 !== 0, // 判断是否为最后一个或倒数第二个元素且为奇数
        key1: (index === data.length - 1 || index === data.length - 2) && index % 2 !== 0 && route.fullPath === '/home' // 判断是否为最后一个或倒数第二个元素且为奇数
      }"
      ref="boxes"
    >
      <basicsCard :state="item" />
      <div
        v-if="item.isHaveChildren"
        style="border-radius: 50%; width: 40px; height: 40px; margin-left: 200px; margin-top: 20px"
        class="tree-collaps-ablenode h-full w-full relative cursor-pointer bg-blue-900 text-white text-2xl flex items-center justify-center border-3 border-white"
      >
        <img src="@/assets/icons/open.png" alt="" />
      </div>
      <div v-else style="height: 40px; margin-top: 20px"></div>
    </div>
    <div class="vertical-line" :style="{ height: calculateProduct(data.length) + 'px' }"></div>
  </div>
</template>

<script setup lang="ts">
import { inject, ref } from "vue";
import { useRoute } from "vue-router";

import basicsCard from "./basicsCard.vue";
const route = useRoute();
// 使用 inject 并提供类型
interface Node {
  data: {
    type: string;
    child: [];
  };
  // 其他属性...
}
const getNode = inject<() => Node>("getNode");
const node = getNode?.();
const data = ref([]);
if (node && node.data.type === "Custom") {
  data.value = node.data.child;
}
const boxes = ref([]); // 用于存储 box 的引用
function calculateProduct(n) {
  const factor1 = Math.ceil(n / 2);
  const factor2 = 265;

  // 定义线长度并转换为小数形式
  let lineLengthPercentage;
  switch (n) {
    case 1:
      lineLengthPercentage = 0; // 0%
      break;
    case 2:
      lineLengthPercentage = 0.5; // 50%
      break;
    case 3:
      lineLengthPercentage = 0.25; // 25%
      break;
    case 4:
      lineLengthPercentage = 0.75; // 75%
      break;
    case 5:
      lineLengthPercentage = 0.5; // 50%
      break;
    case 6:
      lineLengthPercentage = 0.83; // 83%
      break;
    default:
      lineLengthPercentage = 0; // 默认值为0
  }

  // 计算乘积
  const product = factor1 * factor2 * lineLengthPercentage + factor1 * 20;
  console.log(`${n} 的乘积为：${product}`);
  // 返回结果

  return product;
}
</script>

<style scoped>
.custom-number {
  width: 43px;
  height: 43px;
  color: rgb(255, 255, 255);
  background-color: rgb(33, 60, 141);
  border-radius: 50%;
  font-size: 19px;
  /* line-height: 150%; */
  border: rgb(255, 255, 255) solid 3px;
  text-align: center;
  font-weight: bold;
  position: absolute;
  left: 47.5%;
  top: -21px;
  z-index: 10000;
}
.tree-node-custom-card-home {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding-top: 30px;
  border-top: 2px solid #8f8f8f;
  border-left: 2px solid #8f8f8f;
  padding-left: 30px;
  margin-top: -116px;
}
.tree-node-custom-card-home::before {
  content: "";
  position: absolute;
  left: -3px;
  bottom: -47px;
  height: 200px;
  width: 5px;
  background-color: rgba(255, 255, 255, 1);
  z-index: 1;
}
.tree-node-custom-card {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding-top: 30px;
  border-top: 2px solid #8f8f8f;
  border-left: 2px solid #8f8f8f;
  padding-left: 30px;
  margin-top: -116px;
}
.tree-node-custom-card::before {
  content: "";
  position: absolute;
  left: -3px;
  bottom: -47px;
  height: 200px;
  width: 5px;
  background-color: #eff0f5;
  z-index: 1;
}

.node-group {
  width: 430px;
  position: relative;
  margin-bottom: 50px;
}
.odd {
  margin-bottom: 20px;
}
.even {
  margin-bottom: 20px;
  margin-left: 108px;
}

.node-group.odd::before {
  content: "";
  position: absolute;
  top: 50%;
  /* right: -50px; */
  left: -30px;
  width: 50px;
  height: 2px;
  background-color: #8f8f8f;
}
.key::before {
  content: "";
  position: absolute;
  top: 51%;
  left: -50px;
  width: 8px;
  height: 126px;
  background-color: rgba(255, 255, 255, 1);
  z-index: 2;
}
.key1::before {
  content: "";
  position: absolute;
  top: 51%;
  left: -50px;
  width: 8px;
  height: 126px;
  background-color: #eff0f5;
  z-index: 2;
}
.node-group.even::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -41px;
  width: 41px;
  height: 2px;
  background-color: #8f8f8f;
}

.vertical-line {
  width: 2px;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: auto;
  /* 100px 是盒子高度的一半 不知道有没有更灵活的方式 */
  background-color: #8f8f8f;
  transform: translateX(-50%);
}
.tree-collaps-ablenode::after {
  content: "";
  position: absolute;
  top: -25px;
  left: 16px;
  width: 2px;
  height: 26px;
  background-color: #8f8f8f;
}
</style>
